<template>
  <div class="manualinput">
    <div class="content-box">
      <dl>
        <dt>
          <p style="font-weight: bold;color:#000;">编辑发票信息</p>
          <!-- <p>CNY : <span style="color:black;">{{ total }}</span></p> -->
        </dt>

        <dd v-for="item in infoList.records" :key="item.index" v-if="!item.children">

          <div v-if="[2,3,4].includes(item.type)" class="input-group flex flex-jus-start">
            <div>{{ item.label }}<span v-if="item.required" class="red">*</span></div>
            <input type="text" v-model="item.value" readonly @click="timeSelectHand(item)" placeholder="请选择时间">
          </div>
          <div v-if="item.type == 1" class="input-group flex flex-jus-start">
            <div>{{ item.label }}<span v-if="item.required" class="red">*</span></div>
            <input type="text" v-model="item.value" placeholder="请输入修改信息">
          </div>
        </dd>

        <dd style="padding-left: 0;padding-right: 0;">
          <dl v-for="item in infoList.records" :key="item.index" v-if="item.children">
            <dt style="font-weight: bold;color:#000;">{{ item.label }}</dt>
            <dd v-for="w in item.children" style="padding: 0;">

              <dl>
                <dd v-for="x in w.items" :key="x.index" style="padding-left:.4rem;">
                  <!-- <dt style="font-weight: bold;color:#000;"></dt> -->
                  <div class="input-group flex flex-jus-start">
                    <div>{{ x.label }}</div>
                    <input type="text" inputmode="number" v-model="x.value">
                  </div>
                </dd>
              </dl>

              <!-- <div class="input-group flex flex-jus-start">
                <div>{{ w.label }}</div>
                <input type="text" v-model="w.value" placeholder="请输入修改信息">
              </div> -->
            </dd>
          </dl>
        </dd>
      </dl>
    </div>
    <div class="btn-group flex">
      <div class="btn-edit flex" @click="goBack">返回</div>
      <div class="btn-submit flex" @click="submit">确认修改</div>
    </div> 


    <!-- 年月日时分 -->
    <van-popup v-model="picker1" position="bottom">
      <van-datetime-picker
        v-model="val1"
        type="datetime"
        @cancel="onCancel"
        @confirm="onConfirmTime"
    />
    </van-popup>
    <!-- 年月日 -->
    <van-popup v-model="picker2" position="bottom">
      <van-datetime-picker
        v-model="val2"
        type="date"
        @cancel="onCancel"
        @confirm="onConfirmTime"
    />
    </van-popup>
    <!-- 时分 -->
    <van-popup v-model="picker3" position="bottom">
      <van-datetime-picker
        v-model="val3"
        type="time"
        @cancel="onCancel"
        @confirm="onConfirmTime"
    />
    </van-popup>

  </div>
</template>
<script>

import { Toast } from 'vant-green';
import { mapMutations } from 'vuex';
export default {
  name: 'ManualShowEditView',
  data(){
    return {
      total        : 0,
      infoList     : [],
      infoListTemp : [],
      index        : -1,
      vuexArrList  : [],

      picker1     : false,     // 弹窗显示
      picker2     : false,     // 弹窗显示
      picker3     : false,     // 弹窗显示
      val1        : '',
      val2        : '',
      val3        : '',
      columns     : [],
    }
  },
  components: { },
  methods:{
    ...mapMutations(["setFullLoading",'setTempInvoiceInputList','setSwiperPage']),

    timeSelectHand(item){
      this.item = item;
      switch (item.type){
        case 2:
          this.picker1 = true
          break;
        case 3:
          this.picker2 = true
          break;
        case 4:
          this.picker3 = true
          break;
        default:
          break;
      }
    },
    onConfirmTime(value){
      this.picker  = false
      this.picker1 = false
      this.picker2 = false
      this.picker3 = false
      if(this.item == 4){
        this.item.value = value
      }else{
        const date   = new Date(value);
        const year   = date.getFullYear();
        const month  = (date.getMonth() + 1).toString().padStart(2, '0');
        const day    = date.getDate().toString().padStart(2, '0');
        const hours  = date.getHours().toString().padStart(2, '0');
        const minute = date.getMinutes().toString().padStart(2, '0');
        switch(this.item.type){
          case 2:
            this.item.value = `${year}-${month}-${day} ${hours}:${minute}`
            break;
          case 3:
            this.item.value = `${year}-${month}-${day}`
            break;
          default:
          this.item.value = ''
            break;
        }
      }
      console.log(this.item.value);
    },
    onCancel(){
      this.picker  = false // 直接关闭
      this.picker1 = false // 直接关闭
      this.picker2 = false // 直接关闭
      this.picker3 = false // 直接关闭
    },
    toLink(url,params){
      this.$router.push({ path: url, query: params });
    },
    goBack(){
      // 恢复数据
      let infoList = [...this.$store.state.tempInvoiceInputList]
      infoList[this.index] = this.infoListTemp
      // console.log(this.infoList);
      // console.log(this.index,infoList);
      this.$store.commit('setTempInvoiceInputList',infoList)
      this.$router.go(-1)
    },
    submit(){
      // 判断是否有为空值
      let verify = this.infoList.records.every(v=>{
        console.log("判断是否有为空值:",v);
        // 如果不是必填则直接返回true
        if(!v.required){ 
          return true
        }
        // 如果有子项则直接返回true
        if(v.children){
          return true
        }
        return v.value != ""
      })
      
      if(!verify){
        Toast('有必填项没有填写')
      }else{
        let arr = [...this.vuexArrList]
        arr[this.index] = this.infoList
        // 设置fare到列表中
        // console.log("arr::::",arr);
        // 保存数据到vuex
        // console.log("vuexArrList:",arr);
        this.$store.commit("setTempInvoiceInputList",arr)
        this.$store.commit('setSwiperPage',this.index)
        setTimeout(()=>{
          // window.history.back()
          this.$router.go(-1)
        },500)
      }
    },
    deepCopy(obj) {
      if (typeof obj !== 'object' || obj === null) {
          return obj; // 如果不是对象或者为null，则直接返回
      }
      let copy = Array.isArray(obj) ? [] : {}; // 如果是数组则创建空数组，否则创建空对象
      for (let key in obj) {
          if (obj.hasOwnProperty(key)) {
              copy[key] = this.deepCopy(obj[key]); // 递归调用deepCopy函数
          }
      }
      return copy;
    }
  },
  mounted(){

    this.val1 = new Date()
    this.val2 = new Date()
    this.val3 = new Date()

    this.$store.commit('setFullLoading',false)
    // 接收参数
    this.index        = this.$route.query.index // 获取索引index
    this.vuexArrList  = [...this.$store.state.tempInvoiceInputList]
    console.log("this.vuexArrList:",this.vuexArrList);
    this.infoList     = this.vuexArrList[this.index]
    this.infoListTemp = this.deepCopy(this.infoList);
    console.log(this.vuexArrList,this.infoList,this.infoListTemp);
  },
  //设置title的钩子
  beforeRouteEnter(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
  beforeRouteUpdate(to, from, next) {
    document.title = to.meta.title || 'Default Title';
    next();
  },
}
</script>

<style scoped>

.content-box {
  background-color: white;
  box-shadow: 0 0.05rem 0.15rem rgba(0, 0, 0, 0.1);
  border-radius: 0.1rem;
  margin:0.25rem;
}
dl {
  font-size: 0.3rem;
}
dl dt,
dl dd {
  color:#777;
  border-bottom: 0.01rem solid #ededed;
  padding:0.15rem 0.25rem;
  line-height: 1.5;
}
/* dl dd {
  line-height: 2.2;
} */
.input-group div {
  width: 2.2rem;
}
.input-group input {
  text-align: right;
  outline: none;
  border:none;
  -webkit-appearance: none;
  appearance: none;
  font-size: .3rem;
  line-height: 1;
  flex: 1;
  padding:0.15rem 0;
}
.input-group input::-webkit-input-placeholder {
  color:#ccc;
}
.red {
  color:#FF5F4E;
}


.btn-group {
  width:7.5rem;
  position: fixed;
  left:50%;
  bottom:0;
  z-index: 99;
  transform: translateX(-50%);
  padding:.2rem 0.5rem;
  background-color: white;
  box-shadow: 0 0 0.15rem rgba(0, 0, 0, 0.15);
}
.btn-submit {
  flex: 1;
  height:.8rem;
  border-radius: 100rem;
  border:none;
  outline: none;
  appearance: none;
  line-height: 1;
  background-color: #4273D9;
  color:white;
  font-size: .3rem;
}
.btn-edit {
  width:1.5rem;
  height:.8rem;
  border-radius: 100rem;
  border:1px solid #4273D9;
  color:#4273D9;
  outline: none;
  appearance: none;
  line-height: 1;
  background-color: white;
  font-size: .3rem;
  margin-right: .25rem;
}

</style>